<template>
  <v-autocomplete
    v-model="select"
    :items="items"
    :label="label"
    :placeholder="label"
    outlined
    :multiple="false"
    :disabled="disabled"
    dense
  ></v-autocomplete>
</template>

<script>
import { FingerIndexEnum } from "@/store/models/finger_config"
export default {
  name: "FingerIndexEnumSelector",
  model: {
    prop: "selected",
    event: "change",
  },

  props: {
    selected: {
      type: String,
      required: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      required: false,
      default: "选择对应的手指",
    },
  },

  data: () => ({
    items: FingerIndexEnum,
  }),

  computed: {
    select: {
      get() {
        let select = this.selected;
        return select;
      },

      set(val) {
        let select = val;
        this.$emit("change", select); // 告诉父组件选择分类更新了
      },
    },
  },
};
</script>
